<template>
  <view id="vip">
    <view class="body">
      <view class="box">
        <view class="uncircle">
          <image :src="userInfo.avatar" class="untximg" mode="widthFix" />
          <image src="@/static/user/v2.png" class="v2" mode="widthFix" />
        </view>
        <view style="height: 7vh"></view>
        <view class="name">{{ userInfo.name }}</view>
        <view class="navbox">
          <view class="navson" v-for="(item, i) in navlist" :key="i">
            <view class="navnum">{{ item.num }}</view>
            <view class="navtit">{{ item.tit }}</view>
          </view>
        </view>
        <image src="@/static/user/ewmm.png" class="ewm" mode="widthFix" />
        <view class="text">支付前出示可累计积分，会员码每30秒更新</view>
      </view>
      <view class="banner">
        <image src="@/static/user/banner.png" class="banimg" mode="widthFix" />
      </view>
    </view>
  </view>
</template>

<script setup>
import { computed } from "vue";
import { useStore } from "vuex";

const store = useStore();
const userInfo = computed(() => store.state.userInfo);

const ticket = computed(() => store.state.userdata.ticket);
const score = computed(() => store.state.userdata.score);
const balance = computed(() => store.state.userdata.balance);
const giftcard = computed(() => store.state.userdata.giftcard);

const navlist = [
  {
    num: ticket,
    tit: "奈雪券",
  },
  {
    num: score,
    tit: "积分",
  },
  {
    num: balance,
    tit: "余额",
  },
  {
    num: giftcard,
    tit: "礼品卡",
  },
];
</script>

<style lang="scss">
#vip {
  width: 100%;
  height: 100vh;
  background-color: #f0f8fa;
  .body {
    width: 94%;
    margin: auto;
    padding-top: 110rpx;
    box-sizing: border-box;
    .box {
      width: 100%;
      aspect-ratio: 0.88;
      border-radius: 20rpx;
      box-shadow: #e8edef 0rpx 0rpx 10rpx;
      padding: 0 30rpx;
      box-sizing: border-box;
      background-color: #fff;
      position: relative;
      text-align: center;

      .uncircle {
        width: 180rpx;
        height: 180rpx;
        border-radius: 50%;
        background-color: #fff;
        box-shadow: #b3b8be 0rpx 0rpx 10rpx;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translate(-50%, -50%);
        display: flex;
        justify-content: center;
        align-items: center;
        .untximg {
          width: 96%;
          border-radius: 50%;
        }
        .v2 {
          width: 80rpx;
          position: absolute;
          bottom: -10rpx;
          right: -10rpx;
        }
      }
      .name {
        font-size: 32rpx;
        color: #8b8b8b;
        font-weight: bold;
      }
      .navbox {
        width: 100%;
        display: flex;
        margin-top: 50rpx;
      }
      .navson {
        width: 25%;
        text-align: center;
        color: #868787;
        .navnum {
          margin-bottom: 20rpx;
          font-weight: bold;
        }
        .navtit {
          font-size: 0.8rem;
        }
      }
      .ewm{
        width: 44%;
        margin-top: 30rpx;
      }
      .text{
        color: #868787;
        font-size: 0.8rem;
      }
    }
    .banner{
      width: 100%;
      border-radius: 20rpx;
      margin-top: 30rpx;
      .banimg{
        width: 100%;
      }
    }
  }
}
</style>
